<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>WebSocket Streaming Example</title>
    <style>
        #output {
            white-space: pre-wrap;
            /* 保持文本格式 */
            word-wrap: break-word;
            /* 避免溢出容器 */
            background-color: #f9f9f9;
            padding: 10px;
            border: 1px solid #ddd;
            height: 300px;
            overflow-y: auto;
            /* 如果内容超出容器高度则显示滚动条 */
        }
    </style>
</head>

<body>
<h2>提问:</h2>
<textarea cols="50" id="question" rows="4"></textarea><br/>
<input id="userId" placeholder="用户ID" type="number"><br/>
<button onclick="sendMessage()">发送问题</button>

<h2>回答:</h2>
<div id="output"></div>

<script>
    const ws = new WebSocket('ws://localhost:8089/ws-ask'); // 替换为您的WebSocket端点

    ws.onmessage = function (event) {
        const outputDiv = document.getElementById('output');
        outputDiv.innerHTML += basicMarkdownToHtml(event.data); // 将接收到的消息追加到输出区域
        outputDiv.scrollTop = outputDiv.scrollHeight; // 自动滚动到底部
    };

    ws.onerror = function (error) {
        console.error('WebSocket error:', error);
    };

    function sendMessage() {
        const question = document.getElementById('question').value.trim();
        const userId = document.getElementById('userId').value.trim();

        if (question && userId) {
            const requestData = JSON.stringify({
                question: question,
                userId: parseInt(userId, 10)
            });

            ws.send(requestData); // 发送请求数据到服务器
            document.getElementById('output').innerHTML = ''; // 清空之前的回答
        } else {
            alert("请填写所有字段！");
        }
    }

    // 更强的基础Markdown到HTML转换函数
    function basicMarkdownToHtml(mdText) {
        let html = mdText.replace(/^(#{1,6})\s*(.*?)\s*$/gm, function (match, p1, p2) {
            const level = p1.length;
            return '<h' + level + '>' + p2 + '</h' + level + '>';
        }).replace(/(\*\*|__)(.*?)\1/g, '<strong>$2</strong>') // Bold
            .replace(/(\*|_)(.*?)\1/g, '<em>$2</em>') // Italic
            .replace(/\n/g, '<br>'); // Newline to <br>
        return html;
    }

    // const ws = new WebSocket('ws://localhost:8089/qwen-plus/ask'); // 替换为您的WebSocket端点

    // ws.onmessage = function (event) {
    //     const outputDiv = document.getElementById('output');
    //     outputDiv.innerHTML += event.data; // 将接收到的消息追加到输出区域
    //     outputDiv.scrollTop = outputDiv.scrollHeight; // 自动滚动到底部
    // };

    // ws.onerror = function (error) {
    //     console.error('WebSocket error:', error);
    // };

    // function sendMessage() {
    //     const question = document.getElementById('question').value.trim();
    //     const userId = document.getElementById('userId').value.trim();

    //     if (question && userId) {
    //         const requestData = JSON.stringify({
    //             question: question,
    //             userId: parseInt(userId, 10)
    //         });

    //         ws.send(requestData); // 发送请求数据到服务器
    //         document.getElementById('output').innerHTML = ''; // 清空之前的回答
    //     } else {
    //         alert("请填写所有字段！");
    //     }
    // }
</script>
</body>

</html>